<template>
  <div>
    <p id="destitle">我的预约</p>
    <br />
    <el-cascader-panel :options="options"></el-cascader-panel>
    <br />
    <div class="block">
      <span class="demonstration">预约日期：</span>
      <el-date-picker v-model="value1" type="date" placeholder="选择日期">
      </el-date-picker>
    </div>
    <br />
    <div class="time">
      <span class="timestration">预约时间：</span>
      <el-time-select
        v-model="value"
        :picker-options="{
          start: '08:30',
          step: '00:15',
          end: '18:30',
        }"
        placeholder="选择时间"
      >
      </el-time-select>
    </div>
    <br />

    <el-row>
      <el-button type="primary">保存</el-button>
      <el-button>取消</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value: "",
      options: [
        {
          value: "doctor",
          label: "医生",
          children: [
            {
              value: "doc1",
              label: "医生一",
            },
            {
              value: "doc2",
              label: "医生二",
            },
            {
              value: "doc3",
              label: "医生三",
            },
            {
              value: "doc4",
              label: "医生四",
            },
            {
              value: "doc5",
              label: "医生五",
            },
          ],
        },
        {
          value: "meirong",
          label: "美容师",
          children: [
            {
              value: "mei1",
              label: "Linda",
            },
            {
              value: "mei2",
              label: "Tony",
            },
            {
              value: "mei3",
              label: "Ben",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
#destitle {
  font-size: 25px;
}
</style>